import "./index.less";
import { computed, defineComponent, onMounted } from "vue";
import { useUserStore } from "@/stores/modules/user";
import { useDetailStore } from "@/stores/modules/detail";
import { ElButton } from "element-plus";
import c from './index.module.less'
import DetailDialog from './components/dialog'
import { useDetailDialogStore } from "./components/detail";
export default defineComponent({
  name: "Home",
  setup() {
    const userStore = useUserStore()
    const detailStore = useDetailStore()
    const userInfo: any = computed(() => userStore.getUserinfo)
    const detailData: any = computed(() => detailStore.getDetailData)
    const detailDialogStore = useDetailDialogStore()
    const changeColor = (item: any) => {
      item.meta.isFull = !item.meta.isFull
      // 打开弹窗
      detailDialogStore.openVisible(item)
    }

    onMounted(() => {
      detailStore.setDetailData()
      console.log('detailData', detailData.value);
    })
    return () => {
      return (
        <div class="home">
          {/* <img
            src={new URL(`@/assets/images/welcome.png`, import.meta.url).href}  // 引入图片格式
            alt=""
          /> */}

          <div>数据</div>

          {detailData.value.map((item: any) => (
            <div class={c.detail}>
              <div class={c.title} style={{ color: item.meta.isFull ? 'red' : 'green' }}>{item.meta.title}</div>
              <ElButton type='primary' onClick={() => changeColor(item)}>变色</ElButton>
            </div>
          ))}

          <DetailDialog></DetailDialog>


        </div>
      );
    };
  },
});
